<template>
  <div
    class="flex-row align-items space-between"
    :class="isOpenMuen ? 'isOpenMuen' : ''"
  >
    <div>
      <h2 class="h2">
        <img src="@/assets/img/icon-person2.png" class="logoImg" alt />
        浙江杭州框架
      </h2>
      <!-- <img
        v-if="isOpenMuen"
        src="@/assets/img/openMuen.png"
        class="logoImg"
        alt
        @click="handlerChangeMuen"
      />
      <img
        v-else
        src="@/assets/img/closeMuen.png"
        class="logoImg"
        alt
        @click="handlerChangeMuen"
      />
      <span class="line" /> -->
    </div>
    <div
      class="flex-row align-items space-end"
      style="height: 0.4rem; overflow: hidden"
    >
      <div class="avatar">
        <el-menu mode="horizontal" @select="handleSelect">
          <el-submenu index="2">
            <template slot="title">
              <div class="titleSolt">
                <span>{{ UserName }}</span>
                <i class="el-icon-caret-bottom" />
              </div>
            </template>
            <el-menu-item index="2-1">
              <router-link to="/AccSecurity" class="menuTitle">
                <span style="margin-left: 0.1rem">账号安全</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="2-2" @click="LoginOut">
              <span style="margin-left: 0.1rem">退出登陆</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <img
          class="avatar-name"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        />
        <span style="font-size: 0.16rem; padding-right: 0.3rem"
          >机构名称：{{ orgname }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
// import mixin from "./mixin/index";
export default {
  //   mixins: [mixin],
  data() {
    return {
      routerPathName: "",
      localPath: this.$store.getters.getterslocalPath,
      left: 0,
      isContextMenu: false,
      currentpath: "",
    };
  },
  created() {
    console.log(this.$route.matched);
    const arr = this.$route.matched.filter((i) => i.name !== undefined);
    this.routerPathName = arr.map((i) => i.name).join(" > ");
  },
  computed: {
    UserName: () => {
      if (localStorage.getItem("ese")) {
        const user = localStorage.getItem("ese").split(",");
        return user[0];
      }
      return null;
    },
    isOpenMuen: function() {
      return this.$store.getters.gettersisOpenMuen;
    },
    orgname: function() {
      return this.$store.getters.gettersUserInfo.orgname;
    },
  },
  methods: {
    gotoMoney() {
      this.$router.push("/checkstand/index");
    },
    handleSelect() {},
    LoginOut() {
      sessionStorage.clear();
      window.location.reload();
    },
    handlerChangeMuen() {
      this.$store.dispatch(
        "isOpenMuenAction",
        !this.$store.getters.gettersisOpenMuen
      );
    },
    handleTagClose(tag) {
      this.localPath = this.localPath.filter((i) => i.path !== tag.path);
      this.$store.dispatch("localPathAction", this.localPath);
    },
    opencontextmenu(event) {
      if (event.target.hash.split("#")[1] !== "/home") {
        console.log(event);
        this.isContextMenu = true;
        this.left = event.layerX;
        this.currentpath = event.target.hash.split("#")[1];
      }
    },
    CloseContextMenu() {
      this.isContextMenu = false;
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding: 0.5rem 0.2rem;
  border-bottom: 0.01rem solid #f2f2f2;
  .el-icon-s-fold,
  .el-icon-s-unfold {
    font-size: 0.28rem;
    cursor: pointer;
  }
}
.h2 {
  color: #ffffff;
  margin-left: 0.2rem;
  font-size: 0.16rem;
}
.logoImg {
  padding-left: 20px;
  cursor: pointer;
}
.titleSolt {
  position: absolute;
  background: #ffffff;
  color: #303133;
  width: 100px;
}
.avatar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-right: 0.6rem;
  color: #ffffff;
  .avatar-name {
    font-size: 0.2rem;
    margin-right: 0.2rem;
    line-height: 0.4rem;
    cursor: pointer;
  }
  img {
    width: 0.2rem;
    height: 0.2rem;
  }
}
.tagMargin {
  margin-left: 0.05rem;
}
.tagnoactive:hover {
  background: rgba(0, 0, 0, 0.1);
}
a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  height: auto;
}
.el-menu-demo {
  background: rebeccapurple;
}
.line {
  height: 25px;
  margin-left: 0.1rem;
  border: 0.5px solid #c0c4cc;
  display: inline-block;
  vertical-align: middle;
}
</style>
